<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 商品列表 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- 删选表单 start -->
            <div class="handle-box">
                <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAllSelection">批量删除
                </el-button>
                <!-- 类别 -->
                <el-select v-model="goodsVo.goods.goodsCategory.name" placeholder="类别" class="handle-select mr10">
                    <el-option v-for="category in categoryList" :label="category.name" :key="category.id"
                        :value="category.name"></el-option>
                </el-select>
                <!-- 用户 -->
                <el-input v-model="goodsVo.goods.user.nick" placeholder="用户名" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <!-- 删选表单 end -->

            <!-- 表格数据 start -->
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="user.nick" label="用户"></el-table-column>
                <el-table-column prop="goodsCategory.name" label="类别"></el-table-column>
                <el-table-column prop="voice" label="语音地址"></el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <el-table-column prop="money" label="价格(元)"></el-table-column>
                <el-table-column prop="saleNum" label="接单数"></el-table-column>

                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <!-- <el-tag
                            :type="scope.row.status === 'y' ? 'success' : (scope.row.status === 'n' ? 'danger' : '')">
                            {{  scope.row.status  }}</el-tag> -->
                        <el-tag v-if="scope.row.status === 'y'" type="success">上架</el-tag>
                        <el-tag v-else type="danger">下架</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-lx-attention" @click="handleView(scope.$index, scope.row)">
                            查看 </el-button>
                        <el-button type="text" icon="el-icon-lx-refresh"
                            @click="handleStatus(scope.$index, scope.row, 'y')">上架
                        </el-button>
                        <el-button type="text" icon="el-icon-delete" class="red"
                            @click="handleStatus(scope.$index, scope.row, 'n')">下架</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格数据 end -->

            <!-- 分页区 start -->
            <!-- <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="userVo.pageNum"
                    :page-size="pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div> -->
            <!-- 分页区 -->
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="goodsVo.pageNum" :page-size="3"
                    layout="prev, pager, next, jumper" :page-count="totalPages">
                </el-pagination>
            </div>
            <!-- 分页区 end -->
        </div>
        <!-- 弹出框 -->
        <div>
            <el-dialog title="商品详情" :visible.sync="viewVisible" width="40%">
                <el-form ref="form" :model="goods" label-width="70px">
                    <el-form-item label="" align="left">
                        <template slot-scope="scope">
                            <span style="margin-right: 15px"><b>用户</b></span><span style="margin-right: 100px"> {{
                                    goods.user.nick
                            }}</span><br />
                            <span style="margin-right: 15px"><b>类别</b></span><span style="margin-right: 100px"> {{
                                    goods.goodsCategory.name
                            }}</span><br />

                            <span style="margin-right: 15px"><b>描述</b></span><span>{{ goods.description }}</span><br />
                            <span style="margin-right: 15px"><b>价格（元）</b></span><span>{{ goods.money }}</span><br />
                        </template>
                    </el-form-item>

                    <el-form-item label="商品图片">
                        <template v-for="goodsImg in goods.goodsImages">
                            <el-image class="goods_img" :src="goodsImg" :preview-src-list="[goodsImg]"> </el-image>
                        </template>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="viewVisible = false">关闭</el-button>
                </span>
            </el-dialog>
        </div>
        <!-- 弹出框结束 -->
    </div>
</template>

<script>
export default {
    name: 'basetable',
    data() {
        return {
            goodsVo: {
                goods: {
                    userId: '',
                    categoryId: '',
                    voice: '',
                    description: '',
                    money: '',
                    saleNum: '',
                    user: {
                        account: '',
                        nick:''
                    },
                    goodsCategory: {
                        name: ''
                    }
                },
                pageNum: 1
            },
            goods: {
                goodsImgs:[],
                userId: '',
                categoryId: '',
                voice: '',
                description: '',
                money: '',
                saleNum: '',
                goodsImages: [],
                user: {
                    account: '',
                    nick:''
                },
                goodsCategory: {
                    name: ''
                }
            },
            categoryList: [],
            totalPages: 0,
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            viewVisible: false,
            form: {},
            idx: -1,
            id: -1
        };
    },

    created() {
        this.getData();
        this.getCategoryList();
    },

    methods: {
        // 获取 goodsList 数据
        getData() {
            this.$axios.post('/admin/goods/list', this.goodsVo).then((r) => {
                this.tableData = r.data.data.data;
                console.log(r);
                this.totalPages = r.data.data.totalPages;
            });
        },
        // 获取 categoryList 数据
        getCategoryList() {
            this.$axios.get('/admin/category/show/' + 1 + '/' + 100).then((r) => {
                this.categoryList = r.data.data.data;
            });
        },
        handleSearch() {
            this.getData();
        },
        // 查看详情
        handleView(index, row) {
            this.goods = row;
            this.viewVisible = true;
            this.$axios.get('/goods/getGoodsImages', { params: { id: row.id } }).then((r) => {
                console.log(r)
                this.goods.goodsImages = r.data.data;
                // this.user.userImages = r.data.data;
            });
            // this.$axios.get('/user/getFans', { params: { id: row.id } }).then((r) => {
            //     this.user.fans = r.data.data;
            // });
            // this.$axios.get('/user/getLikes', { params: { id: row.id } }).then((r) => {
            //     this.user.likes = r.data.data;
            // });
        },
        handleStatus(index, row, status) {
            if (row.status == status) {
                if (row.status == 'n') {
                    this.$message.warning('该商品已被下架，且勿重复操作');
                } else {
                    this.$message.warning('该商品已上架，且勿重复操作');
                }
                return;
            }
            // 二次确认删除
            let confMsg = status == 'n' ? '确定要下架商品' : '确定要上架商品';
            this.$confirm(confMsg + '吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$axios.get('/admin/goods/updateStatus', { params: { id: row.id, status: status } }).then((r) => {
                        if (r.data.code == 200) {
                            this.$message.success(status == 'n' ? '下架成功' : '上架成功');
                            row.status = status;
                        } else {
                            this.$message.warning('操作失败，请稍候再试');
                        }
                    });
                })
                .catch(() => { });
        },

        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        // 编辑操作
        handleEdit(index, row) {
            this.idx = index;
            this.form = row;
            this.editVisible = true;
        },

        // 分页导航
        handleCurrentChange(pageNum) {
            this.goodsVo.pageNum = pageNum;
            this.getData();
            console.log(`当前页: ${pageNum}`);
        }
        // // 分页导航
        // handlePageChange(val) {
        //     this.$set(this.userVo, 'pageIndex', val);
        //     this.pageNum
        //     this.getData();
        // }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

.goods_img {
    display: block;
    border: black 2px;
    margin-right: 20px;
    float: left;
    width: 150px;
    height: 150px;
}

.size-icon {
    font-size: 25px;
}
</style>

